<template>
  <Container class="mt-128 py-16 border-1 border-dashed border-b-gray-800 w-full">
    <h2 class="text-24 text-center mb-12">Post title: <span class="font-bold">{{ post.title }}</span></h2>
    <h3 class="text-24 text-center mb-12">Post: <span class="font-bold">{{ post.slug }}</span></h3>
    <div class="text-24 text-center mb-12">Post author: <span class="font-bold">{{ post.author }}</span></div>
    <div class="text-24 text-center mb-12">Post preview: <span class="font-bold">{{ post.previewText }}</span></div>
  </Container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BlogGateway } from '@/database/blog/blog.gateway';
import Container from '@/components/ui/Container.vue';

export default defineComponent({
  components: {
    Container,
  },

  props: {
    post: {
      type: Object as any,
    }
  },

  async getStaticPaths() {
    const posts = await BlogGateway.getPostsPreview({
      limit: 1,
    });

    return posts.map((post) => ({
      params: { category: post.category.slug, post: post.slug },
      props: { post }
    }));
  }
});
</script>

